<template>
  <page-container :scroll="false">
    <div class="flex-box">
      <div class="tree-nav">
        <tree-nav
          remote
          :transform="false"
          :load="getTreeData"
          value-key="id"
          label-key="name"
          @change="handleChange"
        ></tree-nav>
      </div>
      <div class="right-container">
        <el-scrollbar>
          <pagination-table
            ref="userTable"
            paged
            :auto-load="false"
            :load="loadData"
            :form-data="queryForm"
          >
            <template #form="{ submit, reset, bindForm }">
              <el-form :ref="bindForm" inline :model="queryForm">
                <el-form-item label="姓名" prop="name">
                  <el-input
                    v-model="queryForm.name"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  v-if="selectedDeptId === 'all'"
                  label="所属部门"
                  prop="dept"
                >
                  <dept-select v-model="queryForm.dept">
                    选部门单选
                  </dept-select>
                </el-form-item>
                <el-form-item style="margin-right: 0">
                  <el-space>
                    <el-button type="primary" @click="submit">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                  </el-space>
                </el-form-item>
              </el-form>
            </template>
            <template #actions>
              <el-button type="primary" @click="add">新增</el-button>
            </template>
            <vxe-column field="name" title="姓名"></vxe-column>
            <vxe-column field="roles" title="角色">
              <template #default="{ row }">
                <el-space>
                  <el-tag v-for="role in row.roles" :key="role.id">
                    {{ role.name }}
                  </el-tag>
                </el-space>
              </template>
            </vxe-column>
            <vxe-column title="操作" fix="right" width="100px">
              <template #default>
                <el-space>
                  <el-button link type="primary">编辑</el-button>
                  <el-button link type="danger">删除</el-button>
                </el-space>
              </template>
            </vxe-column>
          </pagination-table>
        </el-scrollbar>
      </div>
    </div>
  </page-container>
</template>

<script name="DeptManager" lang="ts" setup>
  import { getDeptData, getMockList } from '@/api/common';
  import { ref } from 'vue';

  const userTable = ref<PagenationTableInstance>();

  const selectedDeptId = ref();

  const treeData = ref<any[]>([]);

  const queryForm = ref({
    name: '',
    dept: undefined
  });

  const handleChange = (triggerId: string) => {
    selectedDeptId.value = triggerId;
    userTable.value?.refresh(true);
  };

  const loadData: loadPaginationRequest = async ({
    pageParams,
    queryParams
  }) => {
    console.log(pageParams);
    console.log(queryParams);
    const data = await getMockList();
    const result = data.filter((item) => {
      if (selectedDeptId.value == 'all') return true;
      return item.departments
        ?.map((x: any) => x.id)
        .includes(selectedDeptId.value);
    });
    return {
      dataList: result,
      total: result.length
    };
  };

  const getTreeData = async () => {
    try {
      const data = await getDeptData();
      treeData.value = [{ name: '全部', id: 'all' }, ...data];
      return Promise.resolve(treeData.value);
    } catch (error) {
      return Promise.reject(error);
    }
  };

  const add = () => {};
</script>
